﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <META http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>{$base.username}个人相册-ehs中国-</title>
    <link href="__TMPL__style/group-style.css" rel="stylesheet" type="text/css" />
    <load href="__PUBLIC__/Css/lwy2011.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__style/skin.css" />
    <script type="text/javascript" src="__ROOT__/Public/Js/jquery-1.5.0.min.js"></script>
    <script type="text/javascript" src="__TMPL__js/jquery.jcarousel.min.js"></script>
    <script type="text/javascript" src="__ROOT__/Public/Js/ehs.js"></script>
    <script type="text/javascript" src="__ROOT__/Public/Js/core.js"></script>
    <!--<script type="text/javascript" src="__TMPL__js/jquery.ad-gallery.js"></script>-->
    <style type="text/css">
      #show_box{
        display:table-cell !important;
        display:block;
        position:static !important;
        position:relative;
        overflow:hidden;
        width:650px;
        height:auto;
        border:1px solid #ccc;
        vertical-align:middle;
        text-align:center;
      }
      #bigImg {
        /*position:static !important;
        position:relative;
        top:auto !important;
        top:-50%;
        left:auto !important;
        left:-50%;*/
        padding:20px;
      }
    </style>
    <script type="text/javascript">

      function mycarousel_itemLoadCallback(carousel, state)
      {
        // Check if the requested items already exist
        if (carousel.has(carousel.first, carousel.last)) {
          return;
        }

        jQuery.get(
        '__URL__/albumDetail/uid/{$uid}/aid/{$list[0]['aid']}/first/'+carousel.first+'/last/'+carousel.last,
        {
          /*first: carousel.first,
              last: carousel.last*/
        },
        function(xml) {
          mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
          showImg('/pw8/attachment/{$list[0]['path']}',{$list[0]['pid']});
          var html=__foot.html(1,5,$('#c_num').val(),jumpTo);
          $('#pNav').html(html);
        },
        'xml'
      );
      };

      var pics=new Array();
      function mycarousel_itemAddCallback(carousel, first, last, xml)
      {
        // Set the size of the carousel
        carousel.size(parseInt(jQuery('total', xml).text()));
        //pics=new Array();
        jQuery('image', xml).each(function(i) {
          carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
        });
	
      };

      /**
       * Item html creation helper.
       */

      function mycarousel_getItemHTML(url)
      {
        var arr=url.split('|');
        pics[arr[1]]=arr[2];
        return "<a onclick=\"return showImg('"+arr[0]+"',"+arr[1]+");\"> <img src='" + arr[0] + "' width='75' height='75' alt='' /></a>";
	
      };

      jQuery(document).ready(function() {
        jQuery('#mycarousel').jcarousel({
          itemLoadCallback: mycarousel_itemLoadCallback,
          'scroll':7
        });
	
      });

    </script>
  </head>
  <body>
    <layout name="Public:header0523" cache="1" />
    <div class="main">
      <layout name="Public:group-member-base" cache="0" />
      <div class="content">
        <div class="column_left" style="overflow:hidden">
          <layout name="publicl-left-header" cache="0" />
          <div class="column-cont">
            <div class="location">您的位置：<a href="/column/u_{$uid}.html">{$base.username}</a>的相册>><a href="/column/album_{$uid}.html">{$list[0].aname}</a></div>
            <div class="location" id="imgNamge"></div>
            <!--<div class="mode-album-cont" id="album_con2" style="">-->
            <div id="mycarousel" class="jcarousel-skin-ie7">
              <ul>
              </ul>
            </div>
            <div id="show_box" style="">
              <img id="bigImg" src="" style="" />
            </div>
            <div class="location">图片描述：<span id="pintro">{$list[0]['pintro']}</span></div>
            <!--</div>-->



            <div class="column-comment">
              <h4><a name="comment">发表评论</a></h4>
              <div class="column-cont-comm" id="loadImg">
                <img src="__ROOT__/Public/Images/loading.gif" />
              </div>
              <div class="yahoo" id="pNav"></div>
              <div class="column-comm-box" style="margin-top:20px">
                <form id="frm" action="__URL__/commentSave/uid/{$uid}" method="post">
                  <textarea id="txtContent" name="content" cols="80" rows="8"  onclick="ctext()" style="width:650px;height:180px; font-size:14px;margin-bottom:10px">既然来了，留个记号吧~</textarea><script charset="utf-8" src="/main/PublicFunction/Tpl/default/js/editor/kindeditor.js"></script>
                  <input type="button" value="发表回复" onclick="return clickComment()"/>
                  <input name="uid" id="uid" value="{$uid}" type="hidden"/>
                  <input name="pid" id="pid" value="{$list[0]['pid']}" type="hidden"/>
                  <input name="type" value="photo" type="hidden"/>
                  <input name="c_num" id="c_num" value="0" type="hidden"/>
                </form>
              </div>
            </div>
          </div>
        </div>

        <layout name="public-right" cache="1" />
        <div class="clear"></div>
      </div>
      <div class="footer">
        <layout name="Public:footer" cache="0" />
      </div>
    </div>
    <script>
      //创建编辑器
      KE.init({
        id : 'txtContent',
        items:['emoticons'],
        resizeMode:1
      });
      KE.create('txtContent');
	 
      //绑定编辑器事件
      KE.event.add(KE.g['txtContent'].iframeDoc, 'click',cText,'txtContent');
      KE.event.add(KE.g['txtContent'].iframeDoc, 'blur',sText,'txtContent');
	 
	 
      function cText(){
        if(KE.text('txtContent')=='既然来了，留个记号吧~'){
          KE.text('txtContent','');
        }
        //alert('ha');
      }
      function sText(){
        if(KE.text('txtContent')==''){
          KE.text('txtContent','既然来了，留个记号吧~');
        }
      }
	  
	  
      function clickComment(){
        if (KE.html("txtContent")== "") {
          alert("回复内容不能为空");
          return false;
        }
        //return$("#frm").submit();
        ajax.sendForm('frm',function(data){
          if(data.r=='1'){
            alert('评论成功');
            KE.text("txtContent",'');
            jumpTo(1);
          }
        }
      );
        return false;
      }
	  
      function delColony(id){
        if(confirm('确定删除该评论？')){
          $.getJSON(
          '__URL__/delColonyAjax/id/'+id+'/uid/'+$('#uid').val(),
          function(data){
            if(data.r=='1'){
              jumpTo(1);
            }
          }
        );
        }
        return false;
      }
	  
      function jumpTo(page){
        $('#loadImg').html('<img src="__ROOT__/Public/Images/loading.gif" />');
        $.ajax({
          'url':'__URL__/getCommentAjax',
          'data':{
            'uid':$('#uid').val(),
            'id':$('#pid').val(),
            'p':page,
            'type':2
          },
          'type':'POST',
          'success':function(data){
            $('#loadImg').html(data);
          },
          'dataType':'html'
        });
        var html=__foot.html(page,5,$('#c_num').val(),jumpTo);
        $('#pNav').html(html);
      }
	    
      function showImg(url,num){
        //alert(url);
        $('#show_box').html("<img id='bigImg' src='"+url+"'>");
        var imageArray=document.getElementById("bigImg");
        if(imageArray.offsetWidth>610)//当图片的宽度超过500
        {
          imageArray.style.width="610px";//就让他等于500 否则按原图显示
          //alert('a');
        }
        $('#pid').val(num);
        if(pics){
          var arr=pics[num].split('@');
          $('#pintro').html(arr[0]);
          $('#c_num').val(arr[1]);
        }
        jumpTo(1);
      }
   
  
    </script>
  </body>
</html>